<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>明日校园管理平台</title>
    <link rel="stylesheet" type="text/css" href="/app-assets/css/vendors.css">
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2959825_4s6hxoaw6k7.css">
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            border: 0;
        }

        .all {
            width: 850px;
            height: 400px;
            padding: 7px;
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .screen {
            width: 800px;
            height: 400px;
            overflow: hidden;
            position: relative;
        }

        .screen li {
            width: 800px;
            height: 350px;
            overflow: hidden;
            float: left;
        }

        .screen ul {
            position: absolute;
            left: 0;
            top: 0px;
            width: 3000px;
        }

        .all ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }

        .all ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }

        .all ol li.current {
            background: yellow;
        }


        /*#arr {display: none;}*/
        #arr span {
            width: 40px;
            height: 40px;
            position: absolute;
            left: 5px;
            top: 50%;
            margin-top: -20px;
            background: #000;
            cursor: pointer;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }

        #arr #right {
            right: 5px;
            left: auto;
        }
    </style>

</head>

<body class="vertical-layout vertical-menu 2-columns   menu-expanded fixed-navbar" data-open="click"
      data-menu="vertical-menu" data-color="bg-gradient-x-purple-blue" data-col="2-columns">
<div th:replace="header::header"></div>
<div class="main-menu menu-fixed menu-light menu-accordion    menu-shadow " data-scroll-to-active="true"
     data-img="app-assets/images/backgrounds/02.jpg">
    <div class="navbar-header">
        <ul class="nav navbar-nav flex-row">
            <li class="nav-item mr-auto"><a class="navbar-brand" href="index.html"><img class="brand-logo"
                                                                                        alt="Chameleon admin logo"
                                                                                        src="app-assets/images/logo2.png"/>
                <h3 class="brand-text">明日校园管理平台</h3>
            </a></li>
            <li class="nav-item d-md-none"><a class="nav-link close-navbar"><i class="ft-x"></i></a></li>
        </ul>
    </div>
    <div th:replace="menu::menu"></div>
    <div class="navigation-background"></div>
</div>
<div class="app-content content">
    <div class="content-wrapper">
        <div class="content-wrapper-before"></div>
        <div class="content-header row">
            <div class="content-header-left col-md-4 col-12 mb-2">
                <h3 class="content-header-title">系统主页</h3>
            </div>
            <div class="content-header-right col-md-8 col-12">
                <div class="breadcrumbs-top float-md-right">
                    <div class="breadcrumb-wrapper mr-1">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a th:href="@{/}">主页</a></li>
                            <!--  <li class="breadcrumb-item"><a href="pwd.html"> 修改密码</a></li>-->
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-body">
            <section class="file-browser">
                <div class="row match-height">
                    <div class="col-lg-12 col-md-12">
                        <div class="card" style="">

                            <div class="card-block">
                                <div class="all" id='all'>
                                    <div class="screen" id="screen">
                                        <ul id="ul">
                                            <li><img src="/app-assets/images/img1.jpg" width="800" height="400"/></li>
                                            <li><img src="/app-assets/images/img2.jpg" width="800" height="400"/></li>
                                            <li><img src="/app-assets/images/img3.jpg" width="800" height="400"/></li>
                                        </ul>
                                        <ol></ol>
                                        <div id="arr"><span id="left"></span><span id="right">></span></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div></div>


        <footer class="footer footer-static footer-light navbar-border navbar-shadow">
            <div class="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2"><span
                    class="float-md-left d-block d-md-inline-block">2021 &copy;TomorrowSchoolMs 明日校园智慧管理系统 © 2021-2024</span>
                <ul class="list-inline float-md-right d-block d-md-inline-blockd-none d-lg-block mb-0">
                    <li class="list-inline-item">明日校园智慧管理系统</li>
                </ul>
            </div>
        </footer>

        <!-- BEGIN VENDOR JS-->
        <script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
        <script src="app-assets/js/app-menu.js" type="text/javascript"></script>
        <script src="app-assets/js/app.js" type="text/javascript"></script>
        <script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
        <script>
            //需求：无缝轮播图
            //步骤：
            //1.老三步。获取相关元素。
            //2.补齐相互盒子
            //1.复制第一张图片所在的li，填入所在的ul中。
            //2.生成相关的ol中的li。
            //3.点亮第一个ol中的li。
            //3.鼠标放到小方块儿上，轮播图片。
            //4.添加定时器。
            //5.左右切换的按钮。
            //1.老三步。获取相关元素。
            var box = document.getElementById("all");
            var ul = box.children[0].children[0];
            var ol = box.children[0].children[1];
            var ulLiArr = ul.children;
            //2.补齐相互盒子
            //1.复制第一张图片所在的li，填入所在的ul中。
            var newLi = ulLiArr[0].cloneNode(true);
            ul.appendChild(newLi);
            //2.生成相关的ol中的li。
            for (var i = 0; i < ulLiArr.length - 1; i++) {
                var newOlLi = document.createElement("li");
                newOlLi.innerHTML = i + 1;
                ol.appendChild(newOlLi);
            }
            //3.点亮第一个ol中的li。
            var olLiArr = ol.children;
            ol.children[0].className = "current";
            //3.鼠标放到小方块儿上，轮播图片。
            for (var i = 0; i < olLiArr.length; i++) {
                olLiArr[i].index = i;
                olLiArr[i].onmouseover = function () {
                    for (var j = 0; j < olLiArr.length; j++) {
                        olLiArr[j].className = "";
                    }
                    olLiArr[this.index].className = "current";
                    animate(ul, -this.index * ul.children[0].offsetWidth);
                    key = square = this.index;
                }
            }
            //4.添加定时器。
            var timer = null;
            var key = 0;
            var square = 0;
            timer = setInterval(autoPlay, 1000);


            function autoPlay() {
                key++;
                square++;
                if (key > olLiArr.length) {
                    key = 1;
                    ul.style.left = 0;
                }
                animate(ul, -key * ul.children[0].offsetWidth);


                square = square > olLiArr.length - 1 ? 0 : square;
                for (var j = 0; j < olLiArr.length; j++) {
                    olLiArr[j].className = "";
                }
                olLiArr[square].className = "current";
            }

            //5.鼠标移开开启定时器，鼠标放上去开启定时器。
            box.onmouseover = function () {
                clearInterval(timer);
            }
            box.onmouseout = function () {
                timer = setInterval(autoPlay, 1000);
            }
            //6.左右切换的按钮。
            var btnArr = box.children[0].children[2].children;
            btnArr[0].onclick = function () {
                key--;
                square--;
                if (key < 0) {
                    key = 4;
                    ul.style.left = -5 * ul.children[0].offsetWidth + "px";
                }
                animate(ul, -key * ul.children[0].offsetWidth);


                square = square < 0 ? olLiArr.length - 1 : square;
                for (var j = 0; j < olLiArr.length; j++) {
                    olLiArr[j].className = "";
                }
                olLiArr[square].className = "current";
            }
            btnArr[1].onclick = function () {
                autoPlay();
            }

            //  基本封装
            function animate(obj, target) {
                clearInterval(obj.timer);
                var speed = obj.offsetLeft < target ? 15 : -15;
                obj.timer = setInterval(function () {
                    var result = target - obj.offsetLeft;
                    obj.style.left = obj.offsetLeft + speed + "px";
                    if (Math.abs(result) <= 15) {
                        obj.style.left = target + "px";
                        clearInterval(obj.timer);
                    }
                }, 10);
            }
        </script>
</body>

</html>